import React, { useEffect, useRef, useState } from 'react'
import styles from './index.module.scss'
import Title from '@/components/Title'

import { changePx } from '@/utils/fontSize.js'
import * as echarts from 'echarts'
import Man from '../../assets/elderlyCognitiveScreen/man.png'
import Woman from '../../assets/elderlyCognitiveScreen/woman.png'

export default function Crowd({ res }) {
    const oneRef = useRef(null)
    useEffect(() => {
        const myChart01 = echarts.init(oneRef.current)

        const updateOption = () => {
            const option01 = {
                color: ['#8254FD', '#797CF6', '#D5A751', '#29D9C1', '#4B9EF5', '#8FE8FF'],
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)",
                    textStyle: {
                        color: '#4E8AD7',
                        fontSize: 20,
                        fontFamily: 'PingFang-SC-Regular',
                        fontWeight: 400
                    }
                },
                legend: {
                    type: 'plain',
                    x: 'center',
                    top: 'bottom',
                    icon: 'circle',
                    textStyle: {
                        color: '#fff',
                        fontSize: 14,
                        fontWeight: 400,
                        fontFamily: 'PingFang-SC-Regular',
                        padding: [0, 0, 0, -changePx(0.1, true)],
                        verticalAlign: 'middle',
                    },
                    itemGap: 10,
                    itemWidth: 10, // 设置图例 icon 的宽度
                    itemHeight: 10,
                },
                calculable: true,
                series: [
                    {
                        name: '全区监控人群基本情况',
                        type: 'pie',
                        radius: ['25%', '75%'],
                        roseType: 'area',
                        label: {
                            show: true,
                            color: '#fff',
                            fontSize: 20,
                            formatter: '{d}%',
                            fontWeight: 400,
                            fontFamily: 'PingFang-SC-Regular'
                        },
                        labelLine: {
                            show: true,
                            length: 10, // 引导线第一段的长度
                            length2: 25, // 引导线第一段的长度
                        },
                        data: [
                            { value: res?.age_group[0], name: '60岁以下' },
                            { value: res?.age_group[1], name: '60-65岁' },
                            { value: res?.age_group[2], name: '66-70岁' },
                            { value: res?.age_group[3], name: '71-75岁' },
                            { value: res?.age_group[4], name: '76-80岁' },
                            { value: res?.age_group[5], name: '80岁以上' }
                        ]
                    }
                ]
            }
            myChart01.setOption(option01)
        }

        updateOption()

        const handleResize = () => {
            updateOption()
            myChart01.resize()
        }
        window.addEventListener("resize", handleResize)
    }, [res])

    return (
        <div className={styles.crowd_container}>
            <Title titleDescription={'全区监控人群基本情况'} />
            <div className={styles.content}>
                <div className={styles.left}>
                    <div className={styles.head}>总人数: {res?.total}人</div>
                    <div className={styles.body}>
                        <div className={styles.man}>
                            <img src={Woman} alt="" />
                            <p>{res?.sex[1]}人</p>
                            <div className={styles.sex}>男性人口</div>
                        </div>
                        <div className={styles.woman}>
                            <img src={Man} alt="" />
                            <p>{res?.sex[2]}人</p>
                            <div className={styles.sex}>女性人口</div>
                        </div>
                    </div>
                </div>
                <div className={styles.oneEchart} ref={oneRef}></div>
            </div>
        </div>
    )
}
